<template>
  <div class="rank">
    <div v-if="!showProductDetail" class="show-product">
      <div class="hot-recommand">
        <div class="head-box">猜你喜欢</div>
        <div class="product-list">
          <ProductBox
            v-for="(item, index) in projectLikeList"
            :key="index"
            :projectdata="item"
            @gotoDetail="gotoDetail"
          ></ProductBox>
        </div>
      </div>
      <el-card class="search-box">
        <el-row style="width: 100%">
          关键词搜索：
          <el-input
            style="width: 300px"
            @input="searchKeyWord"
            clearable
            @clear="onClearKeyWord"
            placeholder="请输入商品名关键词搜索"
            v-model="condition.product_name"
          ></el-input>
          <span class="title-style">商品分类：</span>
          <el-select
            style="margin-left: 12px"
            @change="getAllProducts"
            v-model="condition.category_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.category_id"
              :label="item.category_name"
              :value="item.category_id"
            ></el-option>
          </el-select>
        </el-row>
      </el-card>
      <div v-if="projectList.length > 0" class="product-list">
        <ProductBox
          v-for="(item, index) in projectList"
          :key="index"
          :projectdata="item"
          @gotoDetail="gotoDetail"
        ></ProductBox>
      </div>
      <div class="empty-box" v-else>暂无商品</div>
    </div>
    <div v-if="showProductDetail">
      <el-button
        v-show="isShowProductDetailGoBackBtn"
        style="margin: 20px"
        type="primary"
        @click="goback"
        >返回</el-button
      >
      <el-row>
        <ProductDetail
          :productInfo="productInfo"
          @toBuy="isShowProductDetailGoBackBtn = false"
          @goback="isShowProductDetailGoBackBtn = true"
        ></ProductDetail>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getAllCategories,
  getAllProducts,
  getRecommendProductsByUserId,
} from "@/api/user";
import ProductBox from "@/components/ProductBox/index.vue";
import ProductDetail from "@/views/productDetail/index.vue";
import { mapGetters, mapState } from "vuex";
export default {
  name: "ProductIndex",
  components: { ProductBox, ProductDetail },
  props: {},
  data() {
    return {
      isShowProductDetailGoBackBtn: true,
      categoryOptions: [],
      projectList: [],
      projectLikeList: [],
      condition: {
        product_name: "",
        category_id: 0, //分类全部
        status: 1,
      },
      productInfo: {
        product_id: null,
        category_id: null,
        category_name: null,
        product_name: null,
        product_description: null,
        pictures: null,
        price: null,
        stock: null,
        status: null,
        created_at: null,
      },
      showProductDetail: false,
      originprojectList: [],
      selectValue: "collect_count", //comment_count 默认收藏排行
      type: "collect_count", //comment_count 默认收藏排行
      rankList: [
        {
          name: "收藏排行",
          value: "collect_count",
        },
        {
          name: "评论排行",
          value: "comment_count",
        },
      ],
      keyWord: "",
    };
  },
  watch: {},
  computed: {},
  created() {},
  computed: {
    ...mapState("user", ["token"]),
    ...mapGetters(["sidebar", "avatar", "name"]),
  },
  async mounted() {
    this.getAllCategories();
    await this.getAllProducts();
    await this.getRecommendProductsByUserId();
  },
  methods: {
    async goback() {
      await this.getRecommendProductsByUserId();
      this.showProductDetail = false;
    },
    async getRecommendProductsByUserId() {
      if (!this.token) {
        this.projectLikeList = this.projectList.slice(0, 4);
      } else {
        const { data: res } = await getRecommendProductsByUserId(+this.token);
        this.projectLikeList = res || this.projectList.slice(0, 4);
      }
      console.log(this.projectLikeList);
    },
    onClearKeyWord() {},
    searchKeyWord() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(async () => {
        //这里setTimeout用来防抖，也就是500ms内一直在输入，就会清除上次的定时器，就不会一直搜索，等输入完了之后才真正执行一次搜索，优化
        await this.getAllProducts();
      }, 500);
    },
    async getAllProducts() {
      const params = {
        product_name: this.condition.product_name,
        category_id: this.condition.category_id,
        status: 1, //获取已上架的商品
      };
      if (params.category_id == 0) {
        //分类全部
        delete params.category_id;
      }
      const { data: res } = await getAllProducts(params);
      console.log(res);
      this.projectList = res || [];
    },
    async getAllCategories() {
      const res = await getAllCategories();
      this.categoryOptions = [
        { category_id: 0, category_name: "全部" },
        ...res.data,
      ];
    },
    gotoDetail(projectdata) {
      this.productInfo = projectdata;
      this.showProductDetail = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.rank {
  width: 100%;
  height: 100%;
  background-color: rgb(241, 241, 241);
  padding: 0 80px;
}
.product-list {
  display: flex;
  flex-flow: wrap;
}
.empty-box {
  width: 100%;
  height: 100%;
  line-height: 500px;
  text-align: center;
}
.hot-recommand {
  margin: 20px 0;
  .head-box {
    text-align: center;
    color: #ff7b00;
    font-size: 20px;
    font-weight: 700px;
  }
  padding: 20px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
.search-box {
  position: sticky;
  top: 0px;
}
.title-style {
  margin-left: 12px;
  text-align: center;
}
</style>
